<template>
  <div class="header">
    <div style="display: flex; align-items: center">
      <el-icon @click="ck">
        <Expand v-if="$store.state.HomeModule.navBool" />
        <Fold v-else />
      </el-icon>
      <el-icon @click="fullScreen" style="margin-left: 10px; font-size: 16px"
        ><FullScreen
      /></el-icon>
    </div>
    <img src="../assets/logo.png" alt="" width="200" />

    <el-dropdown>
      <span class="el-dropdown-link">
        {{ userInfo.username }}
        <el-icon>
          <ArrowDown />
        </el-icon>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <!-- <el-dropdown-item @click="$router.push('/admin/home')">
            首页
          </el-dropdown-item>
          <el-dropdown-item @click="$router.push('/')">
            前台首页
          </el-dropdown-item> -->
          <el-dropdown-item @click="dialogVisible = true"
            >修改密码</el-dropdown-item
          >
          <el-dropdown-item>
            <span @click="goOut">退出登录</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
  <el-dialog v-model="dialogVisible" title="用户密码修改" width="30%">
    <el-input
      type="password"
      v-model="from.oldPassword"
      placeholder="旧密码"
    ></el-input>
    <br />
    <br />
    <el-input
      type="password"
      v-model="from.newPassword"
      placeholder="新密码"
    ></el-input>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="editPass"> 修改 </el-button>
      </span>
    </template>
  </el-dialog>
</template>
    
<script setup lang='ts'>
import { Fold, Expand, ArrowDown, FullScreen } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { useStore } from "vuex";
import { ref } from "vue";
import { useRouter } from "vue-router";
import { logout, api } from "@/api/index.js";
import { handleFullScreen } from "@/util/myTools.js";
let router = useRouter();
let store = useStore();
const dialogVisible = ref(false);
const userInfo = ref({});
const from = ref({
  oldPassword: "",
  newPassword: "",
});
let ck = () => {
  store.commit("SET_NAV_BOOL");
  // bool.value = !bool.value;
  // console.log('点击了');
};
const init = () => {
  userInfo.value = sessionStorage.getItem("userInfo")
    ? JSON.parse(sessionStorage.getItem("userInfo"))
    : {};
};
init();
let goOut = () => {
  // logout().then((res: any) => {
  //   sessionStorage.removeItem("token");
  //   router.push("/login");
  // });
  router.push("/login");
};
let editPass = () => {
  api("/user/changePassword", "put", {}, { ...from.value }).then((res: any) => {
    if (res.data.code === 200) {
      ElMessage.success("修改成功");
      dialogVisible.value = false;
      router.push("/login");
    } else {
      ElMessage.error(res.data.data);
    }
  });
  console.log(`editPass`);
};

// 全屏事件
const fullScreen = () => {
  handleFullScreen();
};
</script>
    
<style lang="scss">
.el-header {
  //   line-height: 70px;

  .el-icon {
    font-size: 20px;
    :hover {
      cursor: pointer;
    }
  }
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
}
</style>